<template>
<div>
<div class="title">
    <h2>已提交表单</h2>
  </div>
    <!-- <el-input placeholder="输入关键字搜索" v-model="search" style="left:67%;width:25%;padding:10px">
    <template slot="append">搜索</template>
  </el-input> -->

  <!--展示页面-->
  <el-table
    :data="tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )"
    style="width: 100%">
     <el-table-column
      label="报单ID"
      prop="form_id">
    </el-table-column>
    <el-table-column
      label="表单名"
      prop="type_name">
    </el-table-column>
    <el-table-column
      label="申请日期"
      prop="created_at">
    </el-table-column>
    <el-table-column
      label="处理结果"
      prop="status_name"
      width="240">
    </el-table-column>
    <el-table-column
      label="填报人"
      prop="applicant_name">
    </el-table-column>

<el-table-column>
<template slot-scope="scope">
<el-button @click="dialogTableVisible = true;typeLook(scope.row)" size="mini" type="primary">
  查 看
</el-button>
<el-button type="danger" 
@click="dialogFormVisible = true;outerVisible = true;typeAlter(scope.row)" size="mini" >
   修 改 
</el-button>

<!--开放实验室使用申请单查看-->
  <el-dialog title="开放实验室使用申请单" :visible.sync="openUseLook" append-to-body>
    <el-table :data="openUseLooks">
    <el-table-column label="使用原因" prop="reason_use"></el-table-column>
    <el-table-column label="学科名字" prop="porject_name"></el-table-column>
    <el-table-column label="开始时间" prop="start_time"></el-table-column>
    <el-table-column label="结束时间" prop="end_time"></el-table-column>
    </el-table>
    </el-dialog>

<!--实验室仪器设备借用单查看-->
<el-dialog title="实验室仪器设备借用单" :visible.sync="instrumentLentLook" style="text-align:center" append-to-body>
  <el-table :data="labLentLooks">
    <el-table-column label="借用部门"></el-table-column>
    <el-table-column label="设备借用用途"></el-table-column>
    <el-table-column label="申请借用时间"></el-table-column>
    <el-table-column label="借用归还时间"></el-table-column>
    <el-table-column label="借用人"></el-table-column>
    <el-table-column label="电话号码"></el-table-column>
  </el-table>
</el-dialog>

<!--实验室借用申请表单查看-->
<el-dialog title="实验室借用申请表单" :visible.sync="labLentLook" style="text-align:center;width:110%">
  <el-table :data="labLentLooks">
    <el-table-column label="实验室课程名称" prop="course_name"></el-table-column>
    <el-table-column label="创建时间" prop="created_at"></el-table-column>
    <el-table-column label="结束具体使用日期" prop="end_class"></el-table-column>
    <el-table-column label="结束使用日期" prop="end_time"></el-table-column>
    <el-table-column label="实验室编号" prop="laboratory_id"></el-table-column>
    <el-table-column label="人数" prop="number"></el-table-column>
    <el-table-column label="电话" prop="phone"></el-table-column>
    <el-table-column label="实验目的" prop="purpose"></el-table-column>
    <el-table-column label="开始使用日期" prop="start_time"></el-table-column>
    <el-table-column label="开始具体使用日期" prop="start_class"></el-table-column>
    </el-table>
</el-dialog>

<!--实验室运行记录查看-->
<el-dialog title="实验室运行记录" :visible.sync="runLabLook" style="text-align:center" append-to-body>
  <el-table :data="runLabLooks">
    <el-table-column label="序号" prop="laboratory_id"><br></el-table-column>
    <el-table-column label="周次" prop="week"></el-table-column>
    <el-table-column label="时间" prop="time"></el-table-column>
    <el-table-column label="专业班级（综合型）" prop="class_id"></el-table-column>
    <el-table-column label="学生姓名" prop="class_name"></el-table-column>
    <el-table-column label="人数" prop="number"></el-table-column>
    <el-table-column label="课程名称（实验项目）" prop="class_type"></el-table-column>
    <el-table-column label="课程类型" prop="situation"></el-table-column>
    <el-table-column label="任课教师" prop="teacher"></el-table-column>
    <el-table-column label="备注" prop="remark"></el-table-column>
    </el-table>
</el-dialog>

<!--实验室仪器设备借用单修改-->
<el-dialog title="实验室仪器设备借用单" :visible.sync="labLentAlter" style="text-align:center" append-to-body>
   <el-table :data="instrumentLentLooks">
    <el-table-column label="实验室课程名称" prop="course_name"><br></el-table-column>
    <el-table-column label="创建时间" prop="created_at"></el-table-column>
    <el-table-column label="结束具体使用日期" prop="end_class"></el-table-column>
    <el-table-column label="结束使用日期" prop="end_time"></el-table-column>
    <el-table-column label="实验室编号" prop="laboratory_id"></el-table-column>
    <el-table-column label="人数" prop="number"></el-table-column>
    <el-table-column label="电话" prop="phone"></el-table-column>
    <el-table-column label="实验目的" prop="purpose"></el-table-column>
    <el-table-column label="开始使用日期" prop="start_time"></el-table-column>
    <el-table-column label="开始具体使用日期" prop="start_class"></el-table-column>
</el-table>
  <p>
    设备借用清单
    </p>
  <el-button type="primary" size="mini" round style="float:right;margin:0 auto;margin:10px" @click="innerVisible = true" disabled>添 加</el-button>
  <el-dialog title="信息填写" :visible.sync="innerVisible" style="text-align:center" append-to-body>
          <div style="padding:20px">
          设备名称： <el-input v-model="input" style="width:40%;margin:0 auto"></el-input>
          型号： <el-input v-model="input" style="width:40%;margin:0 auto"></el-input>
          </div>
          <div style="padding:20px">
          数量： <el-input v-model="input" style="width:38%;margin:0 auto"></el-input>
          附件： <el-input v-model="input" style="width:39%;margin:0 auto"></el-input>
          </div>
          <el-button type="primary" style="display:block;margin:0 auto">确 认</el-button>
        </el-dialog>
         <div slot="footer" class="dialog-footer">
         </div>
  <el-table :data="gridData" border>
    <el-table-column property="name" label="设备名称" width="150"></el-table-column>
    <el-table-column property="type" label="型号" width="200"></el-table-column>
    <el-table-column property="number" label="数量"></el-table-column>
    <el-table-column property="document" label="附件"></el-table-column>
     <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <div>
                <el-button
                  size="mini"
                  style="margin:10px"
                  @click="handleEdit(scope.$index, scope.row),innerVisible = true" disabled>编 辑</el-button>
                </div>
                <div>
        <el-button
          size="mini"
          type="danger"
          style="margin:10px"
          disabled>删 除</el-button>
          </div>
      </template>
    </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" style="display:block;margin:0 auto">保 存 修 改</el-button>
  </div>
</el-dialog>

<!--实验室借用申请表单修改-->
<el-dialog title="实验室借用申请表单" :visible.sync="openUseAlter" style="text-align:center" append-to-body>
   <el-table>
    <el-table-column label="借用部门"><br></el-table-column>
    <el-table-column label="设备借用用途"></el-table-column>
    <el-table-column label="申请借用时间"></el-table-column>
    <el-table-column label="借用人"></el-table-column>
    <el-table-column label="电话号码"></el-table-column>
</el-table>
  <p>
    设备借用清单
    </p>
  <el-button type="primary" size="mini" round style="float:right;margin:0 auto;margin:10px" @click="innerVisible = true" disabled>添 加</el-button>
  <el-dialog title="信息填写" :visible.sync="innerVisible" style="text-align:center" append-to-body>
          <div style="padding:20px">
          设备名称： <el-input v-model="input" style="width:40%;margin:0 auto"></el-input>
          型号： <el-input v-model="input" style="width:40%;margin:0 auto"></el-input>
          </div>
          <div style="padding:20px">
          数量： <el-input v-model="input" style="width:38%;margin:0 auto"></el-input>
          附件： <el-input v-model="input" style="width:39%;margin:0 auto"></el-input>
          </div>
          <el-button type="primary" style="display:block;margin:0 auto">确 认</el-button>
        </el-dialog>
         <div slot="footer" class="dialog-footer">
         </div>
  <el-table :data="gridData" border>
    <el-table-column property="name" label="设备名称" width="150"></el-table-column>
    <el-table-column property="type" label="型号" width="200"></el-table-column>
    <el-table-column property="number" label="数量"></el-table-column>
    <el-table-column property="document" label="附件"></el-table-column>
     <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <div>
                <el-button
                  size="mini"
                  style="margin:10px"
                  @click="handleEdit(scope.$index, scope.row),innerVisible = true" disabled>编 辑</el-button>
                </div>
                <div>
        <el-button
          size="mini"
          type="danger"
          style="margin:10px"
          disabled
          >删 除</el-button>
          </div>
      </template>
    </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" style="display:block;margin:0 auto">保 存 修 改</el-button>
  </div>
</el-dialog>

<!--实验室运行记录修改-->
<el-dialog title="实验室运行记录" :visible.sync="instrumentLentAlter" style="text-align:center" append-to-body>
   <el-table>
    <el-table-column label="序号"><br></el-table-column>
    <el-table-column label="周次"></el-table-column>
    <el-table-column label="时间"></el-table-column>
    <el-table-column label="专业班级（综合型）"></el-table-column>
    <el-table-column label="学生姓名"></el-table-column>
    <el-table-column label="人数"></el-table-column>
    <el-table-column label="课程名称（实验项目）"></el-table-column>
    <el-table-column label="课程类型"></el-table-column>
    <el-table-column label="任课教师"></el-table-column>
    <el-table-column label="设备运行情况"></el-table-column>
    <el-table-column label="备注"></el-table-column>
    </el-table>
</el-dialog>

<!--开放实验室使用申请单修改-->
<el-dialog title="开放实验室使用申请单" :visible.sync="runLabAlter" style="text-align:center">
   <el-table>
    <el-table-column label="开放实验室"><br></el-table-column>
    </el-table>
</el-dialog>
      </template>
    </el-table-column>
  </el-table>

  <br><br><br>

  <!--分页组件-->
   <div class="block">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        input:'',
        currentPage:1,
        pageSize:7,
        table: false,
        outerVisible: false,
        innerVisible: false,
        labLentLooks:[],
        labLentLook:false,
        openUseLook:false,
        openUseLooks:[],
        instrumentLentLook:false,
        instrumentLentLooks:[],
        runLabLooks:[],
        runLabLook:false,
        labLentAlter:false,
        openUseAlter:false,
        instrumentLentAlter:false,
        runLabAlter:false,
        dialogTableVisible: false,
        gridData: [],
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        do:'',
        tableData: [],
        search: ''
      }
    },
    created(){
      this.getlist();
    },
    methods: {
    async getlist(){
    const {data:res} = await this.$http.get('/api/student/selectform')
    console.log(res);
    this.tableData=res.data;
    // console.log(res.data[0].form_id);
    sessionStorage.setItem('formid',res.data[0].form_id)
  //  const form_id=sessionStorage.getItem('formid');
  //   console.log(form_id);
      },  
  async typeLook(info){
   console.log(info);
  //  console.log(info.form_id);
   if(info.type_name="实验室借用申请表单"){
     this.labLentLook=true
     console.log(info.form_id);
    sessionStorage.setItem('formid',info.form_id)
    const form_id=sessionStorage.getItem('formid')
    console.log(form_id);
    const {data: res}=await this.$http.post(
      '/api/student/selectlabloan',{form_id:form_id}
    );
    console.log(res);
    console.log(res.data);
    this.labLentLooks.push(res.data)
   }else if(info.type_name="开放实验室使用申请单"){
     this.openUseLook=true
      sessionStorage.setItem('formid',info.form_id)
      const form_id=sessionStorage.getItem('formid')
      const {data: ress}=await this.$http.post(
      '/api/student/openlabselect',{form_id:form_id}
    );
      console.log(ress);
      console.log(ress.data);
      this.openUseLook.push(ress.data)
   }else if(info.type_name="实验室仪器设备借用单"){
     this.instrumentLentLook=true
     
   }else if(info.type_name="实验室运行记录"){
      this.runLabLook=true
      console.log(info.form_id);
      sessionStorage.setItem('formid',info.form_id)
      const form_id=sessionStorage.getItem('formid')
      console.log(form_id);
      const {data: ressss}=await this.$http.post(
      '/api/student/selectlabrun',{form_id:form_id}
    );
      console.log(ressss);
      console.log(ressss.data);
      this.runLabLooks.push(ressss.data)
   }
      },
      typeAlter(info){
   console.log(info);
   console.log(info.type_name);
   if(info.type_name="实验室借用申请表单"){
     this.labLentAlter=true
   }else if(info.type_name="开放实验室使用申请单"){
     this.openUseAlter=true
   }else if(info.type_name="实验室仪器设备借用单"){
     this.instrumentLentAlter=true
   }else if(info.type_name="实验室运行记录"){
     this.runLabAlter=true
   }
      },
        handleSizeChange(val) {
        this.pageSize=val;
      },
      handleCurrentChange(val) {
       this.currentPage=val;
      },
     
    },
  }
</script>

<style>
.title {
  text-align: center;
  margin: 3%;
}
</style>